import 'package:flutter/material.dart';
import 'package:get/get.dart';

import '../../demo/dialog/MyDialog.dart';

class TimeSelectorTest extends StatefulWidget {
  final String title; // 标题
  final List<String> options; // 选项
  final int initialIndex; // 默认选中项
  final Color activeColor; // 选中颜色
  final Color inactiveColor; // 未选中颜色
  final double TimeSelectorHeight; // 高
  final Function(int index, String value)? onChanged; // 回调

  const TimeSelectorTest({
    Key? key,
    required this.title,
    required this.options ,
    this.initialIndex = 0,
    this.activeColor = const Color(0xFF8A5AF0),
    this.inactiveColor = const Color(0xFFBDBDBD),
    this.onChanged, this.TimeSelectorHeight=120,
  }) : super(key: key);

  @override
  State<TimeSelectorTest> createState() => _TimeSelectorTestState();
}

class _TimeSelectorTestState extends State<TimeSelectorTest> {
  late int _selectedIndex;

  @override
  void initState() {
    super.initState();
    _selectedIndex = widget.initialIndex;
  }

  void _onTap(int index) async {
    if(index ==3&&!await Get.dialog(Mydialog())){
      return;
    }
    // 1.设置ui
    // 2.发送cgi
    setState(() {
      _selectedIndex = index;
    });
    // widget.onChanged?.call(index, widget.options[index]);
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: widget.TimeSelectorHeight,
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
      decoration: BoxDecoration(
        color: Colors.grey,
        border: Border.all(color: Colors.blueAccent, width: 1),
        borderRadius: BorderRadius.circular(8),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // 标题
          Text(
            widget.title,
            style: const TextStyle(fontSize: 16, fontWeight: FontWeight.w500),
          ),
          const SizedBox(height: 20),

          // 选项
          Stack(
            children: [
              Positioned(
                left: 0,
                right: 0,
                // 线条垂直居中到小圆点的中心
                top: 32, // 注意这个值跟小圆点半径和字体高度有关
                child: Container(
                  margin: EdgeInsets.fromLTRB(16, 0, 16, 0),
                  height: 2,
                  color: Colors.grey.shade300,
                ),
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: List.generate(widget.options.length, (index) {
                  bool isActive = _selectedIndex == index;

                  return GestureDetector(
                    onTap: () => _onTap(index),
                    behavior: HitTestBehavior.opaque,
                    child: Column(
                      children: [
                        // 文本
                        Text(
                          widget.options[index],
                          style: TextStyle(
                            fontSize: 13,
                            color: isActive
                                ? widget.activeColor
                                : widget.inactiveColor,
                          ),
                        ),
                        const SizedBox(height: 8),
                        // 小圆点
                        Container(
                          width: 14,
                          height: 14,
                          decoration: BoxDecoration(
                            shape: BoxShape.circle,
                            color: isActive
                                ? widget.activeColor
                                : widget.inactiveColor,
                          ),
                        ),
                      ],
                    ),
                  );
                }),
              ),

            ],
          ),
        ],
      ),
    );
  }
}
